<template>
	<view>
		<view class="body after-navber">
		    <view :class="show_modal ? 'no-scroll' : ''">
		        <view class="step1" v-if="__user_info.is_distributor == 0">
		            <view class="info-bg">
		                <image class="bg" src="/static/2f73620e7996ca58a87d1cd602066f25c32f63e0.png"></image>
		            </view>
		            <form @submit="formSubmit" :reportSubmit="true">
		                <view class="info">
		                    <view class="info-label flex-row">
		                        <view class="flex-y-center">
		                            欢迎加入
		                            <view class="info-red" style="width: 260rpx; overflow: hidden; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical">
		                                {{ store.name }}
		                            </view>
		                            请填写申请信息
		                        </view>
		                    </view>
		                    <view class="info-label info-content flex-row">
		                        <view class="info-left flex-grow-0 flex-y-center required">分销商类型</view>
		                        <view class="info-right flex-grow-1 flex-row flex-y-center">
		                            <text v-if="type == 1">分销员</text>
		                            <text v-if="type == 2">合伙人</text>
		                        </view>
		                    </view>
		                    <view class="info-label info-content flex-row">
		                        <view class="info-left flex-y-center">邀请人</view>
		                        <view class="info-right flex-row">
		                            <view class="info-red flex-grow-0 flex-y-center">{{ __user_info.parent }}</view>
		                            <view class="info-gray flex-group-1 flex-y-center">(请核对)</view>
		                        </view>
		                    </view>
		                    <view class="info-label info-content flex-row">
		                        <view class="info-left flex-grow-0 flex-y-center required">团队名称</view>
		                        <view class="info-right flex-grow-1 flex-row flex-y-center">
		                            <input class="name-input" name="name" placeholder="请填写团队名称" style="width: 100%" :value="form.name" />
		                        </view>
		                    </view>
		                    <view class="info-label info-content flex-row">
		                        <view class="info-left flex-grow-0 flex-y-center required">手机号码</view>
		                        <view class="info-right flex-grow-1 flex-row flex-y-center">
		                            <input class="mobile-input" name="mobile" placeholder="请填写手机号码" style="width: 100%" type="number" :value="form.mobile" />
		                        </view>
		                    </view>
		                    <view class="info-label info-content flex-row">
		                        <view @tap="agree2" class="info-agree flex-row flex-y-center">
		                            <input name="agree" style="display: none" :value="agree" />
		                            <image :src="img" style="width: 32rpx; height: 32rpx"></image>
		                            <text style="margin-left: 10rpx">我已经阅读并了解</text>
		                            <view @tap="agreement" style="color: #014c8c">
		                                <!-- 【{{share_name}}申请协议】 -->
		                                【合伙人申请协议】
		                            </view>
		                        </view>
		                    </view>
		                </view>
		                <view class="info-btn flex-row">
		                    <button class="flex-y-content info-btn-content" formType="submit">
		                        <!-- 申请成为{{share_name}} -->
		                        申请合伙人
		                    </button>
		                </view>
		            </form>
		            <view class="info">
		                <view class="info-label flex-row">
		                    <view class="flex-y-center">合伙人特权</view>
		                </view>
		                <view class="info-label info-height flex-row" v-if="false">
		                    <view class="flex-y-center">
		                        <image class="info-icon" src="/static/images/img-share-shop.png"></image>
		                    </view>
		                    <view class="info-block">
		                        <view class="info-top bold">独立小店</view>
		                        <view class="info-bottom">拥有自己的小店及二维码</view>
		                    </view>
		                </view>
		                <view class="info-label info-height flex-row">
		                    <view class="flex-y-center">
		                        <image class="info-icon" src="/static/images/img-share-money.png"></image>
		                    </view>
		                    <view class="info-block">
		                        <view class="info-top bold">成为合伙人</view>
		                        <view class="info-bottom">
		                            <!-- 成为{{share_name}}后卖出商品，您可以获得佣金 -->
		                            合伙人卖出商品，您可以获得更高佣金
		                        </view>
		                    </view>
		                </view>
		                <view class="info-label info-height flex-row">
		                    <view class="flex-y-center info-block">
		                        <!-- {{share_name}}的 -->
		                        商品销售统一由厂家直接收款、直接发货，并提供产品的售后服务，分销佣金由厂家统一设置。
		                    </view>
		                </view>
		            </view>
		        </view>
		        <view class="step2" v-else>
		            <view class="info-bg" style="height: 300rpx">
		                <image class="bg" src="/static/images/2f73620e7996ca58a87d1cd602066f25c32f63e0.png"></image>
		            </view>
		            <view class="info">
		                <view class="info-title">
		                    <image class="info-images" src="/static/images/img-share-info.png"></image>
		                </view>
		                <view class="info-content">谢谢您的支持，请等待审核！</view>
		                <view class="flex-row info-btn1">
		                    <navigator class="flex-y-content btn" openType="redirect" url="/pages/index/index">去商城逛逛</navigator>
		                </view>
		            </view>
		        </view>
		    </view>
		    <view :class="'agree-modal flex-x-center flex-y-center ' + (show_modal ? '' : 'hidden')">
		        <view style="width: 600rpx; background-color: #fff; border-radius: 20rpx">
		            <view class="agree-head flex-x-center flex-y-center" style="height: 100rpx">合伙人协议</view>
		            <view class="agree-body">
		                <text>{{ share_setting.agree }}</text>
		            </view>
		            <view @tap="close" class="agree-footer flex-x-center flex-y-center" style="">我已阅读</view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
				    name: '',
				    mobile: ''
				},
				store:{
					name:"合伙人"
				},
				img: '/static/images/img-share-un.png',
				agree: 0,
				show_modal: false,
				type: 2,
				share_name: '',
				__user_info:{
					is_distributor:0
				}
			}
		},
		methods: {
			agree2: function () {
			    var that = this;
			    var t = that.agree;
			    if (0 == t) {
			        t = 1;
					that.img='/static/images/img-share-agree.png',
					that.agree=t
			    } else {
			        if (1 == t) {
			            t = 0;
						that.img='/static/images/img-share-un.png',
						that.agree=t
			        }
			    }
			},
			
			close: function () {
				this.show_modal=false,
			    this.img='/static/images/img-share-agree.png',
				this.agree=1
			},
			
			agreement: function () {
				this.show_modal=true
			},
		}
	}
</script>

<style>
.info-bg {
    width: 100%;
    height: 300rpx;
    background-color: #f7f7f7;
    margin-bottom: 20rpx;
}

.info-bg .bg {
    width: 100%;
    height: 300rpx;
}

.step1 .info {
    width: 100%;
    background-color: #fff;
    border-bottom: 1rpx #e3e3e3 solid;
    border-top: 1rpx #e3e3e3 solid;
    padding: 0 24rpx;
}

.info .info-label {
    width: 100%;
    height: 100rpx;
    border-bottom: 1rpx #e3e3e3 solid;
    color: #353535;
}

.info .info-label:last-child {
    border-bottom: none;
}

.info .info-label .info-red {
    color: #ff4544;
}

.info .info-label .info-gray {
    color: #666;
}

.info .info-label.info-content {
    height: 100rpx;
}

.info-label .info-left {
    width: 176rpx;
}

.info-label .info-left.required::after {
    content: '*';
    color: #ff4544;
}

.info-label .info-agree {
    font-size: 10pt;
}

.info-btn {
    padding: 24rpx;
    background-color: #f7f7f7;
    width: 100%;
}

.info-btn .info-btn-content {
    width: 100%;
    background-color: #ff4544;
    color: #fff;
    font-weight: bold;
    height: 100rpx;
    line-height: 100rpx;
}

.info-label .info-icon {
    width: 60rpx;
    height: 60rpx;
    margin-right: 24rpx;
}

.info .bold {
    font-weight: bold;
}

.info .info-label.info-height {
    height: auto;
}

.info .info-label .info-block {
    padding: 24rpx 0;
}

.info-block .info-top {
    margin-bottom: 16rpx;
}

.info-block .info-bottom {
    font-size: 9pt;
}

.step2 .info {
    padding: 48rpx 24rpx;
    text-align: center;
}

.step2 .info .info-title {
    width: 100%;
    padding: 40rpx 0;
}

.info-title .info-images {
    width: 80rpx;
    height: 80rpx;
}

.step2 .info-btn1 {
    margin-top: 88rpx;
    padding: 0 24rpx;
    width: 100%;
}

.step2 .info-btn1 .btn {
    width: 100%;
    background-color: #ff4544;
    color: #fff;
    font-weight: bold;
    height: 100rpx;
    line-height: 100rpx;
    border-radius: 10rpx;
}

.agree-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.agree-body {
    height: 720rpx;
    overflow: auto;
    padding: 10rpx 20rpx;
}

.agree-footer {
    width: 100%;
    height: 100rpx;
    color: #fff;
    background-color: #ff4544;
    border-radius: 0 0 20rpx 20rpx;
}
</style>
